<template>
  <div class="page-mobile-class-info">
      <white-header :isShowTopNav="true" :isShowBack="true" :isShowRight="true" title="班级"></white-header>
      <div class="class_info_box">
        <!-- <div class="box_title">
          <span class="tips">班级信息</span>
        </div> -->
        <div class="box_content">
          <div class="class_info_row">
            <div class="class_info_row_left">班级名称 ：</div>
            <div class="class_info_row_right">{{ userClassInfo.name }}</div>
          </div>
          <div class="class_info_row">
            <div class="class_info_row_left">隶属专业 ：</div>
            <div class="class_info_row_right">{{ userClassInfo.majorName }}</div>
          </div>
          <div class="class_info_row">
            <div class="class_info_row_left">班级老师 ：</div>
            <div class="class_info_row_right">{{ userClassInfo.teacherName }}</div>
          </div>
          <div class="class_info_row">
            <div class="class_info_row_left">班级编码 ：</div>
            <div class="class_info_row_right">{{ userClassInfo.coding }}</div>
          </div>
          <div class="class_info_row">
            <div class="class_info_row_left">开班时间 ：</div>
            <div class="class_info_row_right">{{ formatDate(userClassInfo.openTime) }}</div>
          </div>
          <div class="class_info_row">
            <div class="class_info_row_left">所属院系 ：</div>
            <div class="class_info_row_right">{{ userClassInfo.facultyName }}</div>
          </div>
          <div class="class_info_row">
            <div class="class_info_row_left">班级介绍 ：</div>
            <div class="class_info_row_right">{{ userClassInfo.introduction ? userClassInfo.introduction : '暂无班级介绍' }}</div>
          </div>
        </div>
      </div>
      <!-- <div class="class_info_box">
        <div class="box_title">
          <span class="tips">班级介绍</span>
        </div>
        <div class="box_content">
          {{ userClassInfo.introduction ? userClassInfo.introduction : '暂无班级介绍' }}
        </div>
      </div> -->
      
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import WhiteHeader from "~/components/mobile/WhiteHeader.vue";
import { getClassInfo } from "~/api/class.js";
export default {
  name: "class-info",
  scrollToTop: true,
  components: {
    WhiteHeader
  },
  // head() {
  //   return {
  //     meta: [
  //       {
  //         "http-equiv": "Content-Security-Policy",
  //         content: "upgrade-insecure-requests"
  //       }
  //     ]
  //   };
  // },
  props: ["setDisabled", "refreshFun", "setLoading"],
  data() {
    return {
      userClassInfo:{},
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      token(state) {
        return state.token;
      },
      is_loading(state) {
        return state.is_loading;
      },
    }),
  },
  activated() {
    if (process.client) {
      if (!this.token && Object.keys(this.user_info).length == 0) {
        this.$router.replace("/m/login");
        return;
      }
    }
    this.initPages();
    this.setDisabled(false);
    this.refreshFun(() => {
      this.initPages();
      this.setLoading(false);
    });
  },
  deactivated() {
    
    this.setDisabled(true);
  },
  destroyed() {
    
  },
  watch: {
    course_record_list(new_val, old_val) {
      console.log("new_val:", new_val);
      console.log("old_val:", old_val);
      // if (new_val.length !== old_val.length) {
      //   this.getTestPapers(
      //     new_val.map(i => {
      //       return {
      //         ...i,
      //         courseId: i.id
      //       };
      //     })
      //   );
      // }
    }
  },
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    formatDate(date) {
      if (date) {
        let _date = new Date(date);
        var year = _date.getFullYear();
        var month = _date.getMonth() + 1;
        var date = _date.getDate();
        var hours = _date.getHours();
        var minutes = _date.getMinutes();
        if (month < 10) {
          month = "0" + month;
        }
        if (date < 10) {
          date = "0" + date;
        }
        if (hours < 10) {
          hours = "0" + hours;
        }
        if (minutes < 10) {
          minutes = "0" + minutes;
        }
        return year + "." + month + "." + date + " " + hours + ":" + minutes;
      } else {
        return "未知";
      }
    },
    async getClassInfo(){
      if(!this.user_info.userClass){
        return;
      }
      this.SET_IS_LOADING(true);
      let result = await getClassInfo(this.user_info.userClass);
      if (result && result.data &&  result.data.code == 200) {
        this.userClassInfo = result.data.data;
      }else{
        this.$toast("服务不可用！");
      }
      this.SET_IS_LOADING(false);
    },
    initPages() {
      if (process.client) {
        if (!this.token && Object.keys(this.user_info).length == 0) {
          this.$router.replace("/m/login");
          return;
        } else {
          this.getClassInfo();
        }
      }
    }
  },
  created() {
    this.setDisabled(false);
    this.initPages();
    this.refreshFun(() => {
      this.initPages();
      this.setLoading(false);
    });
  },
  mounted() {
    
  }
};
</script>

<style lang="scss" scoped>
.page-mobile-class-info {
  min-height: 100vh;
  // background-color: #fff;
      background-color: #f9f8f8;
  padding: 0 0 0.2rem 0;
  .class_info_box{
    width: 7.2rem;
    background-color: #fff;
    margin-top: .192rem;
    padding: .38rem .56rem;
    .box_title{
      padding: 0.3rem;
      font-size: 0.32rem;
      text-align: center;
      .tips {
        position: relative;
        font-weight: bold;
      }
      .tips::before {
        content: "";
        display: block;
        position: absolute;
        left: -1.7rem;
        top: 50%;
        // transform: translateY(-1px);
        width: 1.5rem;
        height: 1px;
        background: #babec2;
      }
      .tips::after {
        content: "";
        display: block;
        position: absolute;
        right: -1.7rem;
        top: 50%;
        width: 1.5rem;
        // transform: translateY(-1px);
        height: 1px;
        background: #babec2;
      }
    }
    .box_content{
      box-sizing: border-box;
      // padding: 0 .28rem .28rem;
      width: 7.2rem;
      font-size: .28rem;
      color: #101010;
      font-style: normal;
      letter-spacing: 0px;
      line-height: .4rem;
      .class_info_row{
        margin-bottom: .4rem;
        display: flex;
        width: 100%;
        font-size: .28rem;
        color: #101010;
        font-style: normal;
        letter-spacing: 0px;
        line-height: .4rem;
        .class_info_row_left{
          width: 21%;
          color: #afb0b3;
          font-size: .2688rem;
        }
        .class_info_row_right{
          width: 79%;
          color: #707680;
          font-size: .2688rem;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.page-mobile-class-info {
  
}
</style>
